<template>
  <view class="container">
    <!-- 背景图 -->
    <image :src="img_url + obj.avatar" style="width: 100%; height: 600rpx; opacity: 0.8" mode="aspectFill"></image>
    <!-- 自定义导航栏 -->
    <view
      style="display: flex; align-items: center; width: 100%; box-sizing: border-box; position: fixed; top: 0; left: 0; padding-left: 30rpx; z-index: 99"
      :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }"
    >
      <image src="../../static/dynamicimg/whiteleft.png" style="width: 20rpx; height: 28rpx; vertical-align: middle" mode="" @click="goback"></image>
      <view style="font-weight: bold; font-size: 36rpx; color: #ffffff; padding-left: 254rpx">用户资料</view>
      <view></view>
    </view>
    <!-- 用户头像 -->
    <view style="position: absolute; top: 300rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%">
      <image :src="img_url + obj.avatar" style="width: 140rpx; height: 140rpx; border-radius: 50%" mode="aspectFill"></image>
      <view style="margin-top: 16rpx">
        <text style="font-weight: 500; font-size: 32rpx; color: #ffffff">{{ obj.nickname }}</text>
        <image
          v-if="obj.gender"
          :src="obj.gender == 2 ? '../../static/dynamicimg/gril.png' : '../../static/dynamicimg/boy.png'"
          mode=""
          style="width: 28rpx; height: 28rpx; padding-left: 12rpx"
        ></image>
      </view>
    </view>
    <!-- 用户的资料 -->
    <view class="info">
      <!-- 它的资料 -->
      <view class="fl">
        <view class="leftcommon"></view>
        <view style="font-weight: bold; font-size: 32rpx; color: #222222">TA的资料</view>
      </view>
      <view style="display: flex; align-items: center; font-weight: 400; font-size: 26rpx; color: #333333; margin-top: 16rpx; padding-left: 30rpx">
        <view style="margin-right: 46rpx">年龄：{{ obj.age || '' }}</view>
        <view style="margin-right: 46rpx">性别：{{ obj.gender == 1 ? '男' : '女' }}</view>
        <view>地址：{{ obj.province }}</view>
      </view>
      <!--  它的动态-->
      <view class="fl" style="justify-content: space-between; margin-top: 48rpx">
        <view class="fl">
          <view class="leftcommon"></view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">TA的动态</view>
        </view>
        <view style="font-weight: 400; font-size: 24rpx; color: #666666" @click="gouserdynamic">
          更多
          <uni-icons type="right" size="10"></uni-icons>
        </view>
      </view>
      <view style="margin-top: 16rpx">
        <firstimg :list="obj.dongtai"></firstimg>
      </view>
      <!-- 他的活动 -->
      <view class="fl" style="justify-content: space-between; margin-top: 48rpx">
        <view class="fl">
          <view class="leftcommon"></view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">TA的活动</view>
        </view>
        <view style="font-weight: 400; font-size: 24rpx; color: #666666" @click="gouseractive">
          更多
          <uni-icons type="right" size="10"></uni-icons>
        </view>
      </view>

      <view class="body" v-if="otheract.length != 0" @click="godetail">
        <text style="font-weight: 700">{{ otheract[0].places == 1 ? '室内活动' : '室外活动' }}</text>
        <view class="center">
          <image class="one" :src="img_url + otheract[0].images" mode="aspectFill"></image>
          <view class="right">
            <text style="font-weight: bold; font-size: 28rpx; color: #151515">{{ otheract[0].title }}</text>
            <view class="num">
              <image class="two" src="@/static/myimg/a12.png"></image>
              <text style="font-weight: 400; font-size: 24rpx; color: #151515">{{ otheract[0].num }}人</text>
              <view class="color">
                <image src="@/static/myimg/a11.png" style="width: 56rpx; height: 24rpx; vertical-align: middle"></image>
                <text style="font-weight: 400; font-size: 20rpx; color: #ffffff">{{ otheract[0].girl_num }}</text>
              </view>
              <view class="color" style="margin-left: 10rpx">
                <image src="@/static/myimg/a10.png" style="width: 56rpx; height: 24rpx; vertical-align: middle"></image>
                <text style="font-weight: 400; font-size: 20rpx; color: #ffffff">{{ otheract[0].male_num }}</text>
              </view>
            </view>
            <view class="num">
              <image class="two" src="@/static/myimg/a12.png" style="vertical-align: top"></image>
              <text class="text_0">{{ otheract[0].acttime + ' ' + otheract[0].week }}</text>
            </view>
            <view class="num">
              <image class="two" src="@/static/myimg/a12.png" style="vertical-align: top"></image>
              <text class="text_0" style="width: 355rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical">
                {{ otheract[0].address }}
              </text>
            </view>
          </view>
        </view>
        <view style="border: 1rpx solid #e8e8e8; margin: 20rpx 0"></view>
        <view class="bottom">
          <view class="left">
            <image :src="img_url + item.avatar" v-for="(item, index) in otheract[0].userlist" style="margin-left: -20rpx" />

            <text style="margin-left: 20rpx; font-weight: 400; font-size: 24rpx; color: #666666">报名中{{ otheract[0].join_num + '/' + otheract[0].num }}</text>
          </view>
          <view class="right" style="background-color: #feff01; font-weight: 500; font-size: 28rpx; color: #151515" @click="godetail">查看详情</view>
        </view>
      </view>
    </view>
    <!-- 站位盒子 -->
    <view style="height: 156rpx"></view>
    <view class="sixin">
      <view class="btn" @tap="util.urlTo('/dynamic/sixin/sixin?id=' + userid)">去私信</view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      otheract: [],
      hometop: '',
      navheight: '',
      gender: 1,
      userid: '',
      obj: {},
      img_url: this.img_url
    };
  },
  onLoad(opt) {
    console.log(opt);
    if (opt.userid) {
      // console.log('11111111111111111111', this.userid);
      this.userid = opt.userid;
    }
    this.getuserinfo();
    this.getotheract();
    const app = getApp();
    this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
    this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
  },
  methods: {
    //计算年龄
    getCurrentAgeByBirthDate(strBirthday) {
      // 将出生日期的字符串通过"-"分割成数组
      const strBirthdayArr = strBirthday.split('-');
      // 拿到出生日期的年
      const birthYear = strBirthdayArr[0];
      // 拿到出生日期的月
      const birthMonth = strBirthdayArr[1];
      // 拿到出生日期的日
      const birthDay = strBirthdayArr[2];
      // 创建一个时间对象
      const d = new Date();
      // 拿到当前时间的年
      const nowYear = d.getFullYear();
      // 拿到当前时间的月
      const nowMonth = d.getMonth() + 1;
      // 拿到当前时间的日
      const nowDay = d.getDate();
      // 如果出生日期的年等于当前时间的年
      if (nowYear === birthYear) return 0; // 返回周岁年龄 0,并终止函数执行
      // 如果如果出生日期的年不等于于当前时间的年,则拿到年之差
      const ageDiff = nowYear - birthYear; // 年之差
      // 如果年之差是个负数,则表示用户输入的出生日期错误,晚于今天,返回 -1,并终止函数执行
      if (ageDiff < 0) return -1; // 返回错误 -1,并终止函数执行
      // 如果年之差是个正整数,但出生日期的月与当前时间的月不相等
      if (nowMonth !== birthMonth) {
        // 拿到出生日期的日与当前时间的月之差
        const monthDiff = nowMonth - birthMonth; // 月之差
        // 如果月之差是个负数,则年之差 - 1后得到周岁年龄,否则直接得到周岁年龄
        return monthDiff < 0 ? ageDiff - 1 : ageDiff; // 返回周岁年龄,并终止函数执行
      }
      // 如果出生日期的月与当前时间的月相等,则拿到出生日期的日与当前时间的日之差
      const dayDiff = nowDay - birthDay;
      // 如果日之差是个负数,则年之差 - 1得到周岁年龄,否则直接得到周岁年龄
      return dayDiff < 0 ? ageDiff - 1 : ageDiff; // 返回周岁年龄,并终止函数执行
    },

    // 跳转详情
    godetail() {
      uni.navigateTo({
        url: '/dynamic/activedetail/activedetail?id=' + this.otheract[0].id
      });
    },
    // 获取他的活动
    async getotheract() {
      const res = await this.http('/doings/mydoings', {
        page: 1,
        state: '2',
        user_id: this.userid
      });
      console.log('他人活动', res);
      this.otheract = res.data.data.filter((item) => {
        return item.status == 2;
      });

      if (this.otheract.length != 0) {
        this.otheract[0].acttime = dayjs(this.otheract[0].starttime * 1000).format('MM:DD hh:mm') + '-' + dayjs(this.otheract[0].endtime * 1000).format('MM:DD hh:mm');
        if (new Date(this.otheract[0].starttime * 1000).getDay() == 0) {
          this.otheract[0].week = '周日';
        } else if (new Date(this.otheract[0].starttime * 1000).getDay() == 1) {
          this.otheract[0].week = '周一';
        } else if (new Date(this.otheract[0].starttime * 1000).getDay() == 2) {
          this.otheract[0].week = '周二';
        } else if (new Date(this.otheract[0].starttime * 1000).getDay() == 3) {
          this.otheract[0].week = '周三';
        } else if (new Date(this.otheract[0].starttime * 1000).getDay() == 4) {
          this.otheract[0].week = '周四';
        } else if (new Date(this.otheract[0].starttime * 1000).getDay() == 5) {
          this.otheract[0].week = '周五';
        } else if (new Date(this.otheract[0].starttime * 1000).getDay() == 6) {
          this.otheract[0].week = '周六';
        }
      }
    },
    // 跳转他的活动
    gouseractive() {
      uni.navigateTo({
        url: '/dynamic/useractive/useractive?userid=' + this.userid
      });
    },
    // 跳转他的动态
    gouserdynamic() {
      uni.navigateTo({
        url: '/dynamic/userdynamic/userdynamic?userid=' + this.userid
      });
    },
    goback() {
      uni.navigateBack();
    },
    //获取个人详情
    async getuserinfo() {
      const res = await this.http('/user/infor', {
        user_id: this.userid
      });
      console.log('用户信息', res);
      this.obj = res.data;
      this.obj.dongtai = [];
      this.obj.dynamic.forEach((item) => {
        this.obj.dongtai.push(item.images);
      });
      this.obj.age = this.getCurrentAgeByBirthDate(this.obj.birthday);
      console.log(this.obj.age);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .fl {
    display: flex;
    align-items: center;
  }

  .info {
    box-sizing: border-box;
    width: 100%;
    padding: 40rpx 30rpx;

    .leftcommon {
      box-sizing: border-box;
      width: 6rpx;
      height: 32rpx;
      background: #feff01;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      margin-right: 16rpx;
    }

    .body {
      box-sizing: border-box;
      width: 690rpx;
      height: 418rpx;
      background: #fffff1;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 24rpx 16rpx;

      .center {
        display: flex;

        margin-top: 20rpx;

        .one {
          width: 260rpx;
          height: 168rpx;
          background-color: aqua;
          vertical-align: top;
          border-radius: 12rpx;
          overflow: hidden;
        }

        .right {
          display: inline-block;
          margin-left: 15rpx;

          .num {
            display: flex;
            align-items: center;

            // margin: 10rpx 0;
            .two {
              width: 24rpx;
              height: 24rpx;
              vertical-align: bottom;
            }

            text {
              display: inline-block;
              height: 100%;
              line-height: 40rpx;
              margin: 0 30rpx 0 10rpx;
              // 限制长度
            }

            .text_0 {
              font-size: 24rpx;
              vertical-align: top;
            }

            .color {
              display: inline-block;
              position: relative;
              top: 0;
              left: 0;

              image {
                vertical-align: top;
              }

              text {
                position: absolute;
                right: -22rpx;
                color: #ffffff;
                top: 6rpx;
              }
            }
          }
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;

        .left {
          image {
            width: 56rpx;
            height: 56rpx;
            border-radius: 28rpx;
            margin-left: -20rpx;
            vertical-align: middle;
          }
        }

        .right {
          width: 160rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;

          border-radius: 20rpx;
        }
      }
    }
  }

  .sixin {
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 750rpx;
    height: 156rpx;
    background: #ffffff;
    box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.12);
    padding: 8rpx 30rpx;

    .btn {
      width: 690rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #151515;
      background: #feff01;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
}
</style>
